<template>
    <div>
        <div>{{ props }}</div>
        <div>{{ item }}</div>
        <slot/>
        <p>the headingSlot content </p>
        <slot name="headingSlot"/>
        <p>the leverSlot content </p>
        <slot name="leverSlot"/>

        <Button @click="emits('addNum')">修改父组件num{{ props.num }}</Button>

    </div>
</template>

<script setup>

import { toRefs, defineProps, defineEmits, useSlots } from 'vue'

const props = defineProps({
  item: {
    type: Object,
    default () {
      return {
        title: 'hello',
        items: []
      }
    }
  }
})

const { item } = toRefs(props)

const emits = defineEmits(['change', 'delete'])

// 判断<slot/>是否有传值
const slotDefault = !!useSlots().default
// 判断<slot name="test"/>是否有传值
const slotTest = !!useSlots().test
console.log(slotDefault, slotTest)
</script>

<style lang="scss" scoped>
</style>
